function Snake(el){
    this.el=el
    this.len=20  //长度length    但个蛇节长宽
    //存蛇  设定蛇默认的位置
    this.snakeObj = [
        { x: 3, y :2, color:'red', ele:null},  //蛇头  XY轴坐标，颜色
        { x: 2, y :2, color:'blue', ele:null}, // 蛇的身体
        { x: 1, y :2, color:'blue', ele:null}  // 蛇的身体
      ]
    this.direction='right'
}

//创建蛇
Snake.prototype.create=function(){
    //先清除再创建
    this.remove()

    //循环上边数组遍历，同步蛇
    for(let i=0;i<this.snakeObj.length;i++){
        //i  0  1  2
        // this.snakeObj[i]每节蛇的信息

        //1 创建蛇标签对象
        let divObj=document.createElement('div')
        //2 使用初始数据 追加蛇宽高
        divObj.style.width=this.len+'px'
        divObj.style.height=this.len+'px'
        divObj.style.background=this.snakeObj[i].color
        //2.1 追加左边 lef top
        divObj.style.position='absolute'
        divObj.style.left=this.snakeObj[i].x *this.len+'px'
        divObj.style.top=this.snakeObj[i].y *this.len+'px'
        //3 放到页面中展示
        this.el.appendChild(divObj)

        //将追加的  保存初始化数组中，方便移除
        this.snakeObj[i].ele=divObj
    }

}

//移除旧蛇，内置原型中 到创建蛇中调用
Snake.prototype.remove=function(){
    for(let i=0;i<this.snakeObj.length;i++){
        if(this.snakeObj[i].ele)    this.el.removeChild(this.snakeObj[i].ele)    //父.removeChild(子)
    }
}

Snake.prototype.move=function(){
    // for(let i=0;i<this.snakeObj.length;i++){
    //     this.snakeObj[i].x +=1
    // }

    // 动一下：  3用2位置  2用1位置 1用蛇头位置 蛇头下面判断好了
    //           如果换个方向改变：蛇头自己判断， 1用蛇头  2用蛇1  （切记：有问题  1已经改成蛇头了 ）

  // i=this.snakeObj.length-1=2  i>0-->2,1  
  for(let i=this.snakeObj.length-1;i>0;i--){
    this.snakeObj[i].x=this.snakeObj[i-1].x
    this.snakeObj[i].y=this.snakeObj[i-1].y
}

    switch(this.direction){
        case 'top':
            this.snakeObj[0].y -= 1
            break;
            case 'bottom':
            this.snakeObj[0].y += 1
            break;
            case 'left':
            this.snakeObj[0].x -= 1
            break;
            case 'right':
            this.snakeObj[0].x += 1
            break;
    }
    this.create()
}